<template>
	<div class="repair-return-info">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<span>{{ propUpType === 'add' ? $t('publicBtn.add') : propUpType === 'edit' ? $t('publicBtn.edit') :
						$t('publicBtn.detail') }}</span>
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<el-form ref="info" :model="info" :rules="rules" label-width="100px" class="demo-ruleForm">
					<div class="content_info">
						<template v-if="propUpType !== 'detail'">
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item label="退货单号">
										<el-input readonly :value="info.code" placeholder="自动生成" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="退货日期" prop="expireTime">
										<el-date-picker v-model="info.expireTime" :picker-options="pickerOptions" type="date"
											:placeholder="$t('placeholderTip.pSelect')" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
											style="width:100%" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="入库类型">
										<el-select v-model="info.type" filterable :placeholder="$t('placeholderTip.pSelect')"
											style="width:100%">
											<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item label="维修单号">
										<el-input v-model="info.phone" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="用户姓名">
										<el-input v-model="info.name" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="电话">
										<el-input v-model="info.phone" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item label="车型">
										<el-input v-model="info.phone" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="车牌号">
										<el-input v-model="info.phone" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="vin码">
										<el-input v-model="info.name" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.remark')">
										<el-input v-model="info.remark" type="textarea" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
							</el-row>
							<div class="line"></div>
							<div class="contentInfo">
								<div class="header">
									<div class="title">出库配件明细</div>
									<div class="btn">
										<el-button type="primary" size="mini" @click="addData">{{
											$t('publicBtn.add') }}</el-button>
									</div>
								</div>
								<el-table :data="info.tableData" border style="width: 100%">
									<el-table-column prop="date" label="配件编号" align="center" />
									<el-table-column prop="name" label="配件名称" align="center" />
									<el-table-column prop="province" label="配件别名" align="center" />
									<el-table-column prop="zip" label="品牌" align="center" />
									<el-table-column prop="zip" label="规格" align="center" />
									<el-table-column prop="zip" label="单位" align="center" />
									<el-table-column prop="zip" label="出库数量" align="center" />
									<el-table-column label="退货数量" align="center" width="200px">
										<template slot-scope="scope">
											<el-form-item label=" " label-width="2px" :prop="'tableData.' + scope.$index + '.val'"
												:rules="rules.val">
												<el-input v-model="scope.row.val" :placeholder="$t('placeholderTip.enter')"
													style="width:93%"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="zip" label="总价" align="center" />
									<el-table-column label="仓库" align="center" width="200px">
										<template slot-scope="scope">
											<el-form-item label=" " label-width="2px" :prop="'tableData.' + scope.$index + '.val'"
												:rules="rules.val">
												<el-select style="width:93%" v-model="scope.row.val" filterable
													:placeholder="$t('placeholderTip.pSelect')">
													<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
												</el-select>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="库位" align="center" width="200px">
										<template slot-scope="scope">
											<el-form-item label=" " label-width="2px" :prop="'tableData.' + scope.$index + '.val'"
												:rules="rules.val">
												<el-select style="width:93%" v-model="scope.row.val" filterable
													:placeholder="$t('placeholderTip.pSelect')">
													<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
												</el-select>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column fixed="right" label="操作" align="center" width="80px">
										<template slot-scope="scope">
											<el-button @click="deleteRow(scope.$index)" type="text" size="small">{{
												$t('publicBtn.delete') }}</el-button>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</template>
						<template v-else></template>
					</div>
				</el-form>
				<div class="footerBtn">
					<el-button @click="getCancle">{{ propUpType !== 'detail' ? $t('el.popconfirm.cancelButtonText') :
						$t('el.popconfirm.close') }}</el-button>
					<el-button v-if="propUpType !== 'detail'" type="primary" @click="addSubmitForm"
						v-loading.fullscreen.lock="fullscreenLoading">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
				</div>
			</div>
		</div>
		<!-- 添加配件 -->
		<attachmentModel ref="attachmentModel"></attachmentModel>
	</div>
</template>
<script>
import {
	getStaffInfo,
	setStaffSave,
	setStaffUpdate,
} from '@/api/organizational-chart'
import defaultSettings from '@/settings'
import attachmentModel from '@/components/attachment-model'
export default {
	name: '',
	components: {
		attachmentModel
	},
	data() {
		return {
			BASE_IMG: defaultSettings.BASE_IMG,
			info: {
				name: '', // 名称
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					val: '',
					zip: 200333
				}, {
					date: '2016-05-04',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					val: '',
					zip: 200333
				}, {
					date: '2016-05-01',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					val: '',
					zip: 200333
				}],
			},

			typeList: [],
			rules: {
				expireTime: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				val: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],

			},
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() < Date.now() - 8.64e7
				}
			},
			propUpType: '', // 'add' edit detail
			fullscreenLoading: false,
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
	},
	watch: {
	},
	mounted() {
		window._vm = this
		this.propUpType = this.$route.query.propUpType
		if (this.$route.query.propUpType === 'add') {
		} else if (this.$route.query.id) {
			if (this.$route.query.propUpType === 'edit') {

			}
			// this.getInfo(this.$route.query.id)
		}
	},
	created() {
		console.log('created')
	},
	activated() { },

	destroyed() { },
	methods: {
		// 添加明细按钮
		addData() {
			this.$refs.attachmentModel.getOpen()
		},
		// 处理配件列表选中的数据
		getCheckoutData() {

		},
		// 删除明细
		deleteRow(index) {
			this.info.tableData.splice(index, 1)
			this.$forceUpdate() // 强制跟新
		},
		// 提交
		addSubmitForm() {
			this.$refs['info'].validate(valid => {
				if (valid) {
					var obj = JSON.parse(JSON.stringify(this.info))
					var params = {

					}
					this.fullscreenLoading = true
					if (this.propUpType === 'add') {
						setStaffSave(params)
							.then(res => {
								if (res.code === 200) {
									this.$message({
										showClose: true,
										message: this.$t('text.addSucceedTip'),
										type: 'success'
									})
									this.fullscreenLoading = false
									this.getCancle()
								}
							})
							.catch(err => {
								this.fullscreenLoading = false
								console.log(err, 'err')
							})
					} else {
						params['id'] = obj.id
						setStaffUpdate(params)
							.then(res => {
								if (res.code === 200) {
									this.$message({
										showClose: true,
										message: this.$t('text.editSucceedTip'),
										type: 'success'
									})
									this.fullscreenLoading = false
									this.getCancle()
								}
							})
							.catch(err => {
								this.fullscreenLoading = false
								console.log(err, 'err')
							})
					}
				} else {
					return false
				}
			})
		},
		// 详情
		getInfo(id) {
			const loading = this.$loading({
				lock: true,
				text: this.$t('text.loading'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			getStaffInfo(id).then(res => {
				if (res.code === 200) {
					this.info = res.data
					loading.close()
				}
			}).catch(() => {
				loading.close()
			})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.repair-return-info {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;


			&>.el-form {
				width: 100%;
				height: calc(100% - 40px);

				&>.content_info {
					width: 100%;
					height: 100%;
					overflow: hidden;
					overflow-y: auto;

					.line {
						height: 1px;
						border: 1px solid #ebeef5;
					}

					.el-table {
						::v-deep th {
							line-height: 40px;
							padding: unset;
							background-color: #f2f2f2;
						}
					}
				}


			}

			.footerBtn {
				width: 100%;
				display: flex;
				justify-content: center;
			}

			.cardBox {
				width: 104px;
				height: auto;
				float: left;
				position: relative;

				&>.name {
					text-align: center;
					color: #999;
					font-size: 12px;
				}
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}

			.contentInfo {
				margin-top: 22px;

				&>.header {
					margin-bottom: 22px;
					display: flex;
					justify-content: space-between;
					color: #606266;

					&>.title {
						font-size: 14px;
						font-weight: bold;
					}

				}
			}
		}
	}
}
</style>

